<template>
  <load-more v-if="pageVideos.length > 0" ref="listRef" :enable-refresh="false" @load="handleLoad">
    <div class="list">
      <video-cover 
        class="list-item"
        v-for="item in pageVideos"
        :key="item.bvid"
        :play="item.stat.view"
        :danmaku="item.stat.danmaku"
        v-bind="item"
      ></video-cover>
    </div>
  </load-more>
</template>

<script>
import { computed, reactive, toRefs, onMounted } from 'vue'
import LoadMore from '@/components/LoadMore'
import VideoCover from '@/components/VideoCover'
export default {
    name: 'VideoRelated',
    components: {
        LoadMore,
        VideoCover
    },
    props: {
        videos: {
            type: Array
        }
    },
    setup(props) {
        const pageParams = reactive({
            listRef: null,
            pageNum: 1,
            pageSize: 10,
            totalPage: computed(() => Math.ceil(props.videos.length / pageParams.pageSize))
        })
        const params = reactive({            
            pageVideos: computed(() => props.videos.slice(0, pageParams.pageNum * pageParams.pageSize))
        })
        const handleLoad = () => {              
            if (pageParams.pageNum < pageParams.totalPage) {
                pageParams.pageNum += 1
            } else {
                complete()
            }
            stopLoading()
        }

        const stopLoading = () => {
            pageParams.listRef?.stopLoad()
        }

        const complete = () => {
            pageParams.listRef?.completeLoad()
        }

        onMounted(() => {
            stopLoading()
        })

        return {
            ...toRefs(params),
            handleLoad
        }
    }
}
</script>

<style lang="scss" scoped>
    .list {
        display: flex;
        flex-wrap: wrap;
        &-item {
        width: 50%;
        padding: 8px 5px;
        box-sizing: border-box;
        }
    }
</style>